<template>
  <view class="new-user">
    <!-- 顶部标题 -->
    <view class="header">
      <view class="left">
        <text class="title">新人专享</text>
        <text class="subtitle">专属折扣任选一件</text>
      </view>
      <!-- <view class="right" @tap="goLicai()">
        <text>进入活动 ></text>
      </view> -->
    </view>

    <!-- 优惠券区域 -->
    <scroll-view 
      scroll-x 
      class="coupon-scroll" 
      :show-scrollbar="false"
      enhanced
    >
      <view class="coupon-list">
        <view class="coupon-item" v-for="(item, index) in coupons" :key="index">
          <view class="coupon-container" @tap='goCoupon()'>
            <view class="coupon-content">
              <!-- 左侧价格 -->
              <view class="price-section">
                <text class="price-symbol">￥</text>
                <text class="price-value">{{item.price}}</text>
              </view>
              
              <!-- 右侧信息 -->
              <view class="info-section">
                <text class="coupon-desc">{{item.desc}}</text>
                <text class="coupon-limit">{{item.limit}}</text>
              </view>
              
              <!-- 右上角新人券标签 -->
              <view class="coupon-tag">
                <text>新人券</text>
              </view>
            </view>
            
            <!-- 中间孔洞 -->
            <view class="hole top-hole"></view>
            <view class="hole bottom-hole"></view>
            <view class="dashed-line"></view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 商品列表 -->
    <scroll-view 
      scroll-x 
      class="goods-scroll" 
      :show-scrollbar="false"
      enhanced
    >
      <view class="goods-list">
        <view class="goods-item" v-for="(item, index) in list" :key="index">
          <image class="goods-img" :src="item.image" mode="aspectFill"></image>
          <view class="goods-info">
            <text class="goods-name">{{item.name}}</text>
            <view class="bottom-row">
              <view class="price-row">
                <text class="price"><text class="symbol">￥</text>{{item.min_price}}</text>
                <text class="origin-price">￥{{item.market_price}}</text>
              </view>
              <router-link :to="{path: '/pages/goods_details/goods_details', query: {id: item.id}}">
                <view class="select-btn">选它</view>
              </router-link>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'new-user-coupon',
  props: {
    title: String,
    url: String,
    list: {
      type: Array,
      default: () => ([])
    },
    type: String
  },
  data() {
    return {
      coupons: [
        { price: '18', desc: '新品可用', limit: '满29元可用' },
        { price: '15', desc: '指定商品可用', limit: '满18元可用' },
        { price: '15', desc: '全场通用', limit: '满58元可用' }
      ]
    }
  },
  methods:{
    goLicai(){
      uni.navigateTo({
        url: '/bundle/pages/goods_licai/goods_licai'
      })
      return   
    },
    goCoupon(){
      uni.navigateTo({
        url: '/bundle/pages/get_coupon/get_coupon'
      })
      return   
    }
  }
}
</script>

<style lang="scss">
.new-user {
  /* 柔和渐变背景 */
  background: linear-gradient(135deg, #fff 0%, #fff 100%);
  /* 添加微妙纹理 */
  background-image: linear-gradient(135deg, #fff 0%, #fff 100%),
                   radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 100% 100%, 20px 20px;
  /* 轻微内阴影效果 */
  box-shadow: inset 0 0 30rpx rgba(148, 196, 228, 0.05);
  
  border-radius: 16rpx;
  padding: 24rpx;
  margin: 20rpx;
  /* 外部阴影 */
  box-shadow: 0 8rpx 24rpx rgba(87, 119, 228, 0.15);
  /* 内部描边 */
  border: 1px solid rgba(255, 255, 255, 0.3);
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rpx 16rpx;
    /* 轻微背景色 */
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 12rpx;
    margin-bottom: 16rpx;
    
    .left {
      display: flex;
      align-items: center;
      
      .title {
        color: #000;
        font-size: 32rpx;
        font-weight: bold;
        text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
      }
      
      .subtitle {
        color: #000;
        font-size: 24rpx;
        margin-left: 10rpx;
      }
    }
    
    .right {
      color: #fff;
      font-size: 24rpx;
      background-color: #0396F8;
      padding: 6rpx 16rpx;
      border-radius: 30rpx;
      box-shadow: 0 2rpx 4rpx #0396F8;
    }
  }
  
  .coupon-scroll {
    width: 100%;
    white-space: nowrap;
    margin-top: 16rpx;
    
    .coupon-list {
      display: inline-flex;
      padding: 0 10rpx;
      
      .coupon-item {
        flex: none;
        margin-right: 20rpx;
        width: 320rpx;
        position: relative;
        
        .coupon-container {
          background: linear-gradient(to right, #FFF6E9 0%, #FFF9F0 100%);
          border-radius: 12rpx;
          height: 120rpx;
          position: relative;
          overflow: visible;
          box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
          border: 1px solid rgba(255, 255, 255, 0.5);
          
          .coupon-content {
            display: flex;
            height: 100%;
            position: relative;
            padding: 0 10rpx;
            z-index: 1;
            
            .price-section {
              width: 45%;
              height: 100%;
              display: flex;
              align-items: center;
              padding-right: 20rpx;
              
              .price-symbol {
                font-size: 24rpx;
                color: #FF7676;
                align-self: flex-start;
                margin-top: 36rpx;
                margin-right: 4rpx;
              }
              
              .price-value {
                font-size: 60rpx;
                color: #FF7676;
                font-weight: bold;
                line-height: 1;
              }
            }
            
            .info-section {
              width: 55%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              padding-left: 20rpx;
			  align-items: center;
              
              .coupon-desc {
                font-size: 24rpx;
                color: #FF7676;
                margin-bottom: 8rpx;
                font-weight: 500;
              }
              
              .coupon-limit {
                font-size: 20rpx;
                color: #FF9B7B;
                opacity: 0.9;
              }
            }
            
            /* 新人券标签 - 右上角高亮设计 */
            .coupon-tag {
              position: absolute;
              top: -10rpx;
              right: -10rpx;
              background: linear-gradient(135deg, #FF5C5C 0%, #FF3838 100%);
              padding: 4rpx 12rpx;
              border-radius: 12rpx;
              transform: rotate(5deg);
              box-shadow: 0 4rpx 8rpx rgba(255, 60, 60, 0.3);
              border: 1px solid rgba(255, 255, 255, 0.6);
              z-index: 3;
              
              text {
                color: #FFFFFF;
                font-size: 20rpx;
                font-weight: bold;
                text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
              }
              
              /* 添加闪光效果 */
              &::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(to right, 
                  rgba(255,255,255,0) 0%,
                  rgba(255,255,255,0.3) 50%,
                  rgba(255,255,255,0) 100%);
                transform: translateX(-100%);
                animation: shine 2s infinite;
              }
              
              @keyframes shine {
                100% {
                  transform: translateX(100%);
                }
              }
            }
          }
          
          /* 中间孔洞 - 位于正中央 */
          .hole {
            position: absolute;
            width: 20rpx;
            height: 20rpx;
            background-color: #f4030f;
            border-radius: 50%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
          }
          
          .top-hole {
            top: -10rpx;
          }
          
          .bottom-hole {
            bottom: -10rpx;
          }
          
          /* 虚线 - 位于正中央 */
          .dashed-line {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 0;
            bottom: 0;
            width: 0;
            border-left: 2rpx dashed rgba(255, 118, 118, 0.3);
            z-index: 1;
          }
        }
      }
      
      .coupon-item:last-child {
        margin-right: 0;
      }
    }
  }
  
  .goods-scroll {
    width: 100%;
    white-space: nowrap;
    margin-top: 24rpx;
    
    .goods-list {
      display: inline-flex;
      padding: 0 10rpx;
      
      .goods-item {
        flex: none;
        /* 渐变背景替代纯白 */
        background: linear-gradient(to bottom, #FFFFFF 0%, #FFFAF5 100%);
        border-radius: 12rpx;
        margin-right: 20rpx;
        width: 240rpx;
        overflow: hidden;
        /* 柔和阴影 */
        box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.05);
        /* 边框微调 */
        border: 1px solid rgba(255, 255, 255, 0.8);
        padding: 2rpx;
        
        .goods-img {
          width: 236rpx;
          height: 236rpx;
          display: block;
          border-radius: 10rpx 10rpx 0 0;
        }
        
        .goods-info {
          padding: 16rpx;
          background: rgba(255, 255, 255, 0.6);
          
          .goods-name {
            font-size: 26rpx;
            color: #333333;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            line-height: 1.4;
            height: 72rpx;
          }
          
          .bottom-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-top: 12rpx;
          }
          
          .price-row {
            display: flex;
            flex-direction: column;
            
            .symbol {
              font-size: 20rpx;
            }
            
            .price {
              color: #f4030f;
              font-size: 30rpx;
              font-weight: bold;
            }
            
            .origin-price {
              color: #999999;
              font-size: 20rpx;
              text-decoration: line-through;
              margin-top: 4rpx;
            }
          }
          
          .select-btn {
            width: 70rpx;
            height: 44rpx;
            line-height: 44rpx;
            text-align: center;
            /* 柔和渐变 */
            background: linear-gradient(135deg, #f4030f 0%, #FF7676 100%);
            color: #FFFFFF;
            font-size: 22rpx;
            border-radius: 16rpx;
            /* 轻微阴影 */
            box-shadow: 0 2rpx 6rpx rgba(255, 118, 118, 0.2);
            /* 微妙描边 */
            border: 1px solid rgba(255, 255, 255, 0.3);
          }
        }
      }
      
      .goods-item:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>